<template>
  <div>
    <div class="header">
      <div class="logo">
        <span class="title">E特尔诺</span>
        <span>|</span>
        <span class="des">api共享社区</span>
      </div>
      <navbar></navbar>
    </div>
    <!-- 给轮播图区域添加一个容器，并设置上边距 -->
    <div class="carousel-container">
      <carouseBar></carouseBar>
    </div>
    <!-- 在轮播图组件之后添加搜索框 -->
    <div class="search-container">
      <searchBox @search="onSearch" @clearHistory="clearHistory"></searchBox>
    </div>
    <!-- 搜索结果和历史展示区域 -->
    <div class="search-results" v-if="searchResults.length > 0">
      <h2>搜索结果</h2>
      <ul>
        <li v-for="(result, index) in searchResults" :key="index">
          单词：{{ result.word }}
        </li>
        <li v-for="(result, index) in searchResults" :key="index">
          注释：{{ result.definition }}
        </li>
      </ul>
    </div>
    <!-- <div class="search-history" v-if="searchHistory.length > 0">
      <h2>搜索历史</h2>
      <ul>
        <li v-for="(historyItem, index) in searchHistory" :key="index">
          {{ historyItem }}
          <button @click="deleteHistoryItem(index)">删除</button>
        </li>
      </ul>
    </div> -->
  </div>
</template>

<script>
import navbar from "./components/navBar.vue";
import carouseBar from "./components/carouseBar.vue";
import searchBox from "./components/searchBox.vue";
import axios from "axios"; // 引入axios
export default {
  components: {
    navbar,
    carouseBar,
    searchBox,
  },
  data() {
    return {
      searchResults: [],
      searchHistory: [],
    };
  },

  methods: {
    async onSearch(query) {
      try {
        const response = await axios.get("api/english", {
           
          params: {
            q: query,
            num: 1,
            doctype: "json",
          },
        });

        if (
          response.data.result.code === 200 &&
          response.data.data.entries.length > 0
        ) {
          const result = response.data.data.entries[0];
          console.log(response.data.data.entries[0])
          this.searchResults = [
            { word: result.entry, definition: result.explain },
          ];
          // 将查询添加到历史记录中，但去重
          if (!this.searchHistory.includes(result.entry)) {
            this.searchHistory.push(result.entry);
          }
        } else {
          this.searchResults = []; // 清空结果，如果查询无果
        }
      } catch (error) {
        console.error("Error fetching search results:", error);
        this.searchResults = []; // 发生错误时清空结果
      }
    },
    // 其他方法保持不变
  },
};
</script>

<style scoped>
.header {
  height: 60px;
  width: 100%;
  background-color: #333;
  position: fixed; /* 设置导航栏为固定定位 */
  top: 0;
  left: 0;
  z-index: 100; /* 确保导航栏在最上层 */
  display: flex;
}

.carousel-container {
  margin-top: 70px; /* 设置与导航栏相同的高度作为上边距 */
}

/* 保留原有的样式 */
.logo {
  width: 160px;
  height: 60px;
  text-align: center;
  color: rgb(240, 251, 255);
  display: flex;
  align-items: center;
  justify-content: center;
}

.des {
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  color: aliceblue;
  font-size: 14px;
}

.logo .title,
.logo .des {
  font-family: SimSun, sans-serif;
}
.search-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.search-results,
.search-history {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.search-results h2,
.search-history h2 {
  margin-bottom: 10px;
}

.search-results li,
.search-history li {
  list-style: none;
  margin-bottom: 5px;
}

.search-history button {
  margin-left: 5px;
  padding: 2px 5px;
  border: none;
  background-color: #f00;
  color: white;
  cursor: pointer;
}
</style>
